layui.use(['table', 'form', 'layer', 'jquery', 'element'], function () {
    var element = layui.element
        , table = layui.table
        , form = layui.form
        , layer = layui.layer
        , $ = layui.jquery;

    //数据表渲染
    table.render({
        elem: '#user_table'
        , url: homePath + '/admin/user/list'
        // ,width: 1000
        , height: 600
        //请求参数名称，默认page和limit
        , request: {
            pageName: 'page',
            limitName: 'limit'
        }
        , toolbar: '#user_table_toolbar' //开启头部工具栏，并为其绑定左侧模板
        , defaultToolbar: ['filter', 'exports', 'print']
        , title: '用户数据表'
        , text: {
            none: '暂无相关数据'
        }
        , cols: [[
            {type: 'checkbox', fixed: 'left'}
            , {field: 'id', title: '用户ID', width: 100, fixed: 'left', sort: true}
            , {field: 'nickname', title: '用户昵称', width: 100}
            , {
                field: 'email', title: '邮箱', width: 170, templet: function (data) {
                    return '<em>' + data.email + '</em>'
                }
            }
            , {field: 'signature', title: '个性签名', width: 230}
            , {field: 'sex', title: '性别', width: 90, sort: true}
            , {field: 'phone', title: '手机号码', width: 140}
            , {
                field: 'isAdmin', title: '角色类型', width: 123, unresize: true, templet: function (data) {
                    if (data.isAdmin) {
                        return '<input type="checkbox" name="isAdmin" value="' + data.id + '" lay-skin="switch" lay-text="管理员|普通用户" lay-filter="adminUser" checked>';
                    } else {
                        return '<input type="checkbox" name="isAdmin" value="' + data.id + '" lay-skin="switch" lay-text="管理员|普通用户" lay-filter="adminUser">';
                    }

                }
            }
            , {
                field: 'isLock', title: '用户状态', width: 112, unresize: true, templet: function (data) {
                    if (data.isLock) {
                        return '<input type="checkbox" name="isLock" value="' + data.id + '" title="锁定" lay-filter="userLock" checked>';
                    } else {
                        return '<input type="checkbox" name="isLock" value="' + data.id + '" title="锁定" lay-filter="userLock">';
                    }
                }
            }
            , {field: 'joinTime', title: '加入时间', width: 127, sort: true}
            , {fixed: 'right', title: '操作', toolbar: '#user_table_bar', width: 150}
        ]]
        , page: true
    });

    //头工具栏事件
    table.on('toolbar(user_table)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
            //删除选中用户
            case 'deleteCheckedData':
                //选中的数据
                var data = checkStatus.data;
                if (data.length != 0) {
                    deleteUser(data);
                } else {
                    layer.msg("没有选中任何数据！", {icon: 0, anim: 6});
                }
                break;
            //添加新用户
            case 'addNewUser':
                //弹出添加新用户弹窗
                layer.open({
                    type: 1
                    , title: '添加新用户'
                    , maxmin: true
                    , fixed: true
                    , area: '500px'
                    , content: $("#userForm").eq(0).html()
                    , success: function () {
                        //加载添加提交按钮
                        $("#addBtn").show();
                        //窗口弹出后再次渲染表单，不然部分表单元素样式失效
                        form.render('checkbox', 'userForm');
                        form.render('radio', 'userForm');
                    }
                });
                break;
            case 'searchUser':
                layer.alert("搜索");
                break;
        }
        ;
    });

    //监听行工具事件
    table.on('tool(user_table)', function (obj) {
        //获得当前行的数据
        var data = obj.data;
        //删除当前行
        if (obj.event === 'del') {
            layer.confirm('确认删除用户' + data.id + '吗?', function (index) {
                //index是当前弹窗的下标
                var jsonArray = [];
                jsonArray.push(obj.data);
                deleteUser(jsonArray);
                layer.close(index);
            });
        } else if (obj.event === 'edit') {   //编辑当前行
            // layer.alert("编辑");
            layer.open({
                type: 1
                , title: '编辑用户信息'
                , maxmin: true
                , fixed: true
                , area: '500px'
                , content: $("#userForm").eq(0).html()
                , success: function () {
                    //加载更新提交按钮
                    $("#updateBtn").show();
                    $("#password").removeAttr("lay-verify");
                    //窗口弹出后再次渲染表单，不然部分表单元素样式失效
                    form.render('checkbox', 'userForm');
                    form.render('radio', 'userForm');
                    //将当前行数据填充到表单
                    form.val('userForm', data);
                }
            });
        }
    });

    /*
        //监听单元格编辑
        table.on('edit(user_table)', function (obj) {
            //只有数据变化才会触发该函数
            // obj.data 得到所在行所有键值
            // obj.value; 得到修改后的值
            // obj.field;得到字段
            var data = {}
            data['id'] = obj.data.id;
            data[obj.field] = obj.value;
            updateUser(data);
            // table.reload('user_table');
        });
    */

    //监听角色切换操作
    form.on('switch(adminUser)', function (obj) {
        //this.value 标签绑定该行数据的ID值，
        // this.name 发生改变的字段名,
        // obj.elem.checked 改变后的值，即是否被选中
        var data = {}
        data['id'] = this.value;
        data[this.name] = obj.elem.checked;
        // console.log(data);
        updateUser(data);
    });

    //监听用户锁定操作
    form.on('checkbox(userLock)', function (obj) {
        var data = {}
        data['id'] = this.value;
        data[this.name] = obj.elem.checked;
        // console.log(data);
        updateUser(data);
    });

    //监听添加新用户的提交按钮
    form.on('submit(addBtn)', function (data) {
        //获得的数据
        //console.log(data.field);
        addUser(data.field);
        return false;
    });
    //监听编辑用户的提交按钮
    form.on('submit(updateBtn)', function (data) {
        //获得的数据
        console.log(data.field);
        var d = data.field;
        if (d.isAdmin == undefined)
            d.isAdmin = false;
        if (d.isLock == undefined)
            d.isLock = false;
        console.log(d);
        updateUser(data.field);
        return false;
    });

    //添加用户操作
    function addUser(data) {
        $.ajax({
            url: homePath + '/user/add'
            , type: 'post'
            , data: data
            , dataType: 'json'
            , success: function (res) {
                if (res.code == 0) {
                    layer.closeAll();
                    layer.msg(res.msg, {icon: 1, anim: 1});
                } else {
                    layer.msg(res.msg, {icon: 2, anim: 6});
                }
            }
            , error: function (xhr) {
                layer.msg("系统异常:" + xhr.status, {icon: 2, anim: 6});
            }
        });
    }

    //用户删除操作
    function deleteUser(data) {
        $.ajax({
            url: homePath + '/user/delete'
            , type: 'post'
            , contentType: 'application/json'
            , data: JSON.stringify(data)
            , dataType: 'json'
            , success: function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {icon: 1, anim: 1});
                    table.reload('user_table', {page: {curr: 1}});
                } else {
                    layer.msg(res.msg, {icon: 2, anim: 6})
                }
            }
            , error: function (xhr) {
                layer.msg("系统异常:" + xhr.status, {icon: 2, anim: 6});
            }
        });
    }

    //用户更新操作
    function updateUser(data) {
        $.ajax({
            url: homePath + '/user/update'
            , type: 'post'
            , data: data
            , dataType: 'json'
            , success: function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {icon: 1, anim: 1});
                } else {
                    layer.msg(res.msg, {icon: 2, anim: 6});
                }
                table.reload('user_table');
            }
            , error: function (xhr) {
                layer.msg("系统异常:" + xhr.status, {icon: 2, anim: 6});
                table.reload('user_table');
            }
        });
    }
});

